<template>
  <div>
    <!-- 只要 dialog 关闭了，都会触发 close 事件 -->
    <el-dialog
      :title="addressId?'修改地址':'新增地址'"
      :visible.sync="dialogVisible"
      width="60%"
      @close="closeDialog"
    >
      <el-form ref="form" :model="address" :rules="rules" label-width="120px" size="mini">
        <el-row :gutter="20">
          <el-col :span="10" :offset="0">
            <el-form-item label="地址名称" prop="addressName">
              <el-input v-model="address.addressName" />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="0">
            <el-form-item label="收货人姓名">
              <el-input v-model="address.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="0">
            <el-form-item label="收货人手机号">
              <el-input v-model="address.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="0">
            <el-form-item label="邮政编码">
              <el-input v-model="address.postCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="0">
            <el-form-item label="收货地址">
              <el-cascader
                v-model="selectedAddress"
                style="width:100%"
                size="mini"
                :options="chinaCityData"
                @change="handleChangeCityData"
              />

            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="0">
            <el-form-item label="详细地址">
              <el-input v-model="address.detailAddress" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleDialog">取 消</el-button>
        <el-button type="primary" @click="doAddAddress">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {

  saveAddress as saveAddressApi,
  companyAddress as companyAddressApi,
  updateAddress as updateAddressApi
} from '@/api/order/address'
import { regionDataPlus, CodeToText } from 'element-china-area-data'
export default {
  mixins: [],
  data() {
    return {
      addressId: '',
      chinaCityData: regionDataPlus,
      selectedAddress: [],
      dialogVisible: false,
      address: {
        phone: '13599999999'
      },
      rules: {
        addressName: [{ required: true, message: '地址名称必填', trigger: 'blur' }]
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 打开对话框
    openDialog(id) {
      this.dialogVisible = true
      if (id) { // 是编辑地址
        // console.log('id==>', id)
        this.addressId = id
        this.getAddressDetail()
      }
    },
    async getAddressDetail() {
      const res = await companyAddressApi(this.addressId)
      const { success, data, message } = res
      if (success) {
        this.address = data.address
        this.selectedAddress = data.address.cityCode.split(',')
      } else {
        this.$message.error(message)
      }
    },
    // 关闭对话框
    cancleDialog() {
      this.dialogVisible = false
    },
    closeDialog() {
      // 重置表单
      // resetFields
      // this.$refs.form.resetFields()
      // 获取的是初始值
      console.log(this.$options.data())
      this.address = this.$options.data().address
      this.selectedAddress = []
    },
    handleChangeCityData(value) {
      console.log(value)
      this.address.province = CodeToText[value[0]]
      this.address.city = CodeToText[value[1]]
      this.address.region = CodeToText[value[2]]
      this.address.cityCode = value.join(',')
    },
    async doAddAddress() {
      this.address.receiveStatus = 0
      this.address.sendStatus = 0
      // console.log('this.address=>', this.address)
      let api = null
      if (this.addressId) {
        api = updateAddressApi
      } else {
        api = saveAddressApi
      }
      const res = await api(this.address)
      const { success, message } = res
      if (success) {
        // 1. 关闭对话框
        this.dialogVisible = false
        // 2. 刷新数据
        // this.getAddressList()
        this.$emit('refresh')
        // 3. 清空addressID
        this.addressId = ''
      } else {
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
